//管理模板和模板相关的方法：`todoView`，模板可以接收参数
//以便于模板的专门维护
import { ITodoData } from '../typings.ts';

class TodoTemplate {
  constructor() {}

  /**
   * 根据一项todo item数据拼接字符串返回一项内容模板
   * @param {ITodoData} todo 一项item数据
   * @returns {string} 返回一项内容模板
   */
  protected todoView(todo: ITodoData): string {
    const { id, content, completed } = todo;

    return `
      <input type="checkbox" ${completed ? 'checked' : ''} data-id="${id}" />
      <span style="text-decoration: ${
        completed ? 'line-through' : 'none'
      }">${content}</span>
      <button data-id="${id}">删除</button>
    `;
  }
}

export default TodoTemplate;
